<template>
  <div>
    <el-card style="max-width: 700px">
      <template #header>
        <div class="card-header">
          <span>添加店铺</span>
        </div>
      </template>
      <!-- form表单 -->
      <el-form style="max-width: 600px" :model="shop" label-width="auto" >
        <el-form-item label="店铺名称" prop="shop_name">
          <el-input v-model="shop.shop_name" />
        </el-form-item>

        <el-form-item label="店铺地址" prop="shop_address">
          <el-input v-model="shop.shop_address" />
        </el-form-item>

        <el-form-item label="店铺介绍" prop="shop_explain">
          <el-input v-model="shop.shop_explain" type="textarea" />
        </el-form-item>

        <el-form-item label="店铺图片" prop="shop_img">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            v-model="shop.shop_img"
          >
            <img v-if="shop.shop_img" :src="shop.shop_img" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="店铺分类">
          <el-select v-model="shop.shop_category_id" placeholder="请选择店铺分类">
            <el-option :label="category.category_name" :value="category.shop_category_id" v-for="category in categoryList" :key="category.shop_category_id"/>
            
          </el-select>
        </el-form-item>

        <el-form-item label="起送金额" prop="start_price">
          <el-input v-model="shop.start_price" />
        </el-form-item>

        <el-form-item label="配送金额" prop="delivery_price">
          <el-input v-model="shop.delivery_price" />
        </el-form-item>

        <el-form-item label="备注" prop="remarks">
          <el-input v-model="shop.remarks" type="textarea"/>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-select
            v-model="shop.start_time"
            style="width: 240px"
            placeholder="起始时间"
            start="00:00"
            step="00:15"
            end="23:59"
          />
          <el-time-select
            v-model="shop.end_time"
            style="width: 240px"
            placeholder="闭店时间"
            start="00:00"
            step="00:15"
            end="23:59"
          />

          <el-button type="primary" @click="shopAdd">提交</el-button>
        </el-form-item>
        
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {shopAdd} from '@/api/shop.js'
import {shopCategoryListAPI} from '@/api/category.js'
import { ElMessage } from 'element-plus'
export default {
  data () {
    return {
      shop:{},
      categoryList:[]
    }
  },
  methods:{
    handleAvatarSuccess(resp){
      this.shop.shop_img = resp;
    },
    shopAdd(){
      // 发起异步请求,完成店铺新增功能
      shopAdd(this.shop).then((response)=>{
          if(response.data == 1){
            ElMessage.success('操作成功!')
            //跳转列表查询页面
            this.$router.push('/shopList');
          }else{
            ElMessage.error('新增失败!')
          }
          
      })
    }
  },
  created () {
    // this.shop.business_id = JSON.parse(sessionStorage.getItem("businessInfo")).id;

    let loginInfo = JSON.parse(sessionStorage.getItem("businessInfo"));
    
    if(loginInfo==null){
      //路由到登录页面
      this.$router.push("/login");
      return;
    }
    this.shop.business_id = loginInfo.id;
    
    shopCategoryListAPI({op:"find"}).then((response)=>{
      this.categoryList = response.data;
    })
  }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>